<div class="page-container">
    <div class="page-header">
        <div class="title">
            <div class="title-sub">机构功能室</div>
            <div class="title-x">增加、删除、修改、查询机构公共功能室。</div>
        </div>
        <div class="spacer"></div>
        <img src="../../../assets/images/Data_analysis_SVG 1.png">
    </div>

    <div class="page-body">
        <div class="body-left">
            <div class="header">功能室类型</div>
            <div class="place-type-list">
                <div class="list-item selected" [ngClass]="{'selected': item.selected}"
                    *ngFor="let item of placeTypeList" (click)="placeTypeClick(item)"
                    (contextmenu)="contextMenu($event, menu, item)">
                    {{item.name}}
                </div>
            </div>

            <div class="spacer"></div>

            <div class="btn">
                <button nz-button nzType="primary" nzBlock (click)="addPlaceType()">添加功能室类型</button>
            </div>
        </div>

        <div class="body-content">
            <div class="header">
                <span>功能室详情</span>
                <div class="spacer"></div>
                <span>未使用时间</span>
                <nz-range-picker [nzShowTime]="true" class="margin-l" [(ngModel)]="initDate"
                    (ngModelChange)="dateChange($event)">
                </nz-range-picker>
                <button nz-button nzType="primary" class="margin-l" (click)="addPlace()">
                    <i class="iconfont icon-add-line"></i>
                    添加功能室</button>
            </div>

            <div class="place-list">

                <div *ngFor="let item of placeList" class="margin-b">
                    <div class="place-list-item">
                        <div class="flag" [ngStyle]="{'background-color': item.color}">
                            {{item.name[0]}}
                        </div>

                        <div class="content">
                            <div class="main">{{item.name}}</div>
                            <div class="sub">
                                <span>容纳人数：{{item.count}}</span>
                                <span>备注： {{item.note | ellipsis: 16:'...'}}</span>
                            </div>
                        </div>

                        <div class="spacer"></div>

                        <div class="ex-btn" (click)="placeExpand(item)">
                            使用情况
                            <i class="iconfont icon-arrow-down-s-line" *ngIf="!item.expand"></i>
                            <i class="iconfont icon-arrow-up-s-line" *ngIf="item.expand"></i>
                        </div>

                        <div class="more-op">
                            <a nz-button nzType="link" nz-dropdown [nzDropdownMenu]="placeMenu">
                                <i class="iconfont icon-more-fill"></i>
                            </a>


                            <nz-dropdown-menu #placeMenu="nzDropdownMenu">
                                <ul nz-menu>
                                    <li nz-menu-item (click)="editPlace(item)">
                                        <i class="iconfont icon-edit-line"></i>
                                        编辑
                                    </li>
                                    <li nz-menu-item (click)="delPlace(item)">
                                        <i class="iconfont icon-delete-bin-5-line"></i>
                                        删除
                                    </li>
                                </ul>
                            </nz-dropdown-menu>

                        </div>

                    </div>
                    <div class="place-list-item-expand" *ngIf="item.expand">
                        <h3>使用情况</h3>

                        <zepride-place-use-axis></zepride-place-use-axis>

                        <nz-list [nzHeader]="listHeader" style="margin-top: 46px;">
                            <nz-list-item *ngFor="let useLog of item.placeUseLogs">
                                <div class="place-list-item-expand-list-item ">
                                    <div>
                                        {{useLog.useMode?useLog.useMode:'无'}}
                                    </div>
                                    <div>
                                        {{useLog.beginTime | date:'yyyy-MM-dd HH:mm'}} ~ {{useLog.endTime |
                                        date:'yyyy-MM-dd HH:mm'}}
                                    </div>
                                    <div>
                                        {{useLog.note?useLog.note:'无'}}
                                    </div>
                                </div>
                            </nz-list-item>
                        </nz-list>

                    </div>
                </div>



            </div>

        </div>
    </div>
</div>

<ng-template #listHeader>
    <div class="place-list-item-expand-list-item">
        <div>
            使用用途
        </div>
        <div>
            使用时间
        </div>
        <div>
            使用事项
        </div>
    </div>
</ng-template>

<nz-modal [(nzVisible)]="placeTypeModalVisible" nzTitle="添加功能室类型" (nzOnCancel)="placeTypeModalCancel()"
    [nzContent]="modalContent" (nzOnOk)="placeTypeModalOk()">
</nz-modal>

<ng-template #modalContent>
    <form nz-form [formGroup]="placeTypeFormGroup" [nzNoColon]="true">
        <nz-form-item>
            <nz-form-label [nzSpan]="6">类型名称</nz-form-label>
            <nz-form-control [nzSpan]="18" [nzErrorTip]="placeTypeNameErrorTpl">
                <input formControlName="placeTypeName" type="text" nz-input>
                <ng-template #placeTypeNameErrorTpl let-control>
                    <ng-container *ngIf="control.hasError('required')">
                        请填写类型名称
                    </ng-container>
                    <ng-container *ngIf="control.hasError('maxlength')">
                        名称不能超过10个字符
                    </ng-container>
                </ng-template>
            </nz-form-control>
        </nz-form-item>
    </form>
</ng-template>

<nz-dropdown-menu #menu="nzDropdownMenu">
    <ul nz-menu>
        <li nz-menu-item (click)="editPlaceType()">
            <i class="iconfont icon-edit-line"></i>
            重命名
        </li>
        <li nz-menu-item (click)="delPlaceType()">
            <i class="iconfont icon-delete-bin-5-line"></i>
            删除
        </li>
    </ul>
</nz-dropdown-menu>


<nz-modal [(nzVisible)]="placeModalVisible" nzTitle="添加功能室" (nzOnCancel)="placeModalCancel()"
    [nzContent]="placeModalContent" (nzOnOk)="placeModalOk()">
</nz-modal>

<ng-template #placeModalContent>
    <form nz-form [formGroup]="placeFormGroup" [nzNoColon]="true">
        <nz-form-item>
            <nz-form-label [nzSpan]="6">功能室类型</nz-form-label>
            <nz-form-control [nzSpan]="18" nzErrorTip="请填写功能室类型">
                <nz-select formControlName="placeTypeId" nzPlaceHolder="请选择">
                    <nz-option [nzValue]="item.id" [nzLabel]="item.name" *ngFor="let item of placeTypeList"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="6">场地名称</nz-form-label>
            <nz-form-control [nzSpan]="18" [nzErrorTip]="nameErrorTpl">
                <input formControlName="name" type="text" nz-input nzPlaceHolder="请输入功能室名称">
            </nz-form-control>
            <ng-template #nameErrorTpl let-control>
                <ng-container *ngIf="control.hasError('required')">
                    请输入功能室名称
                </ng-container>
                <ng-container *ngIf="control.hasError('maxlength')">
                    名称不能超过20个字符
                </ng-container>
            </ng-template>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="6">容纳人数</nz-form-label>
            <nz-form-control [nzSpan]="18" [nzErrorTip]="countErrorTpl">
                <nz-input-number class="full-width" formControlName="count" [nzMin]="1" [nzStep]="1"
                    nzPlaceHolder="请输入容纳人数">
                </nz-input-number>
            </nz-form-control>
            <ng-template #countErrorTpl let-control>
                <ng-container *ngIf="control.hasError('required')">
                    请输入容纳人数
                </ng-container>
                <ng-container *ngIf="control.hasError('max')">
                    容纳人数不能超过1000
                </ng-container>
            </ng-template>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSpan]="6">备注</nz-form-label>
            <nz-form-control [nzSpan]="18">
                <input formControlName="note" type="text" nz-input nzPlaceHolder="请输入备注信息">
            </nz-form-control>
        </nz-form-item>
    </form>
</ng-template>